<template>
  <div>
    <el-button type="primary" size="mini" @click="addrole">新增</el-button>
  </div>
  <el-divider></el-divider>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="roleId" label="序号" width="130" />
    <el-table-column prop="roleName" label="角色名称" width="130" />
    <el-table-column prop="roleCode" label="角色标识" width="130" />
    <el-table-column prop="roleDesc" label="角色描述" width="130" />
    <el-table-column prop="dsScope" label="数据权限" width="130" />
    <el-table-column prop="createTime" label="创建时间" width="130" />
    <el-table-column label="操作" width="200">
      <template #default="scope">
        <el-button type="text" size="small" @click="updatefilst(scope.row)">
          编辑
        </el-button>
        <el-button type="text" size="small" @click="delerole(scope.row.roleId)">
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 添加弹框 -->
  <el-dialog
    v-model="dialogVisible"
    title="新增"
    width="500"
    :before-close="handleClose"
  >
    <el-form
      style="max-width: 600px"
      :model="ruleForm"
      status-icon
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
    >
      <el-form-item label="角色姓名" prop="checkPass">
        <el-input v-model="ruleForm.roleName" />
      </el-form-item>
      <el-form-item label="角色标识" prop="checkPass">
        <el-input v-model="ruleForm.roleCode" />
      </el-form-item>
      <el-form-item label="角色描述" prop="checkPass">
        <el-input v-model="ruleForm.roleDesc" />
      </el-form-item>
      <el-form-item label="数据权限" prop="checkPass">
        <el-select
          v-model="ruleForm.dsScope"
          placeholder="请选择"
          style="width: 240px"
        >
          <el-option label="全部" value="全部" />
          <el-option label="自定义" value="自定义" />
          <el-option label="本级及子级" value="本级及子级" />
          <el-option label="本级" value="本级" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm()">
          添加
        </el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
  <!-- 修改弹框 -->
  <el-dialog
    v-model="dialogVisible2"
    title="Tips"
    width="500"
    :before-close="handleClose"
  >
    <el-form
      style="max-width: 600px"
      :model="ruleForm2"
      status-icon
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
    >
      <el-form-item label="角色姓名" prop="checkPass">
        <el-input v-model="ruleForm2.roleName" />
      </el-form-item>
      <el-form-item label="角色标识" prop="checkPass">
        <el-input v-model="ruleForm2.roleCode" />
      </el-form-item>
      <el-form-item label="角色描述" prop="checkPass">
        <el-input v-model="ruleForm2.roleDesc" />
      </el-form-item>
      <el-form-item label="数据权限" prop="checkPass">
        <el-select
          v-model="ruleForm2.dsScope"
          placeholder="请选择"
          style="width: 240px"
        >
          <el-option label="全部" value="全部" />
          <el-option label="自定义" value="自定义" />
          <el-option label="本级及子级" value="本级及子级" />
          <el-option label="本级" value="本级" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="updateForm()">
          修改
        </el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script setup>
import { ref } from 'vue'
import { getRoleList, removerole, saverole, updaterole } from '@/api/user/role'
import { ElMessage } from 'element-plus'
//查询列表
const tableData = ref([])
function selerolelist() {
  getRoleList().then(res => {
    console.log(res.data)
    tableData.value = res.data.data
  })
}
selerolelist()
//添加
const ruleForm = ref({
  roleId: '',
  roleName: '',
  roleCode: '',
  roleDesc: '',
  dsScope: '',
})
const dialogVisible = ref(false)
const addrole = () => {
  ruleForm.value = {}
  dialogVisible.value = true
}
const submitForm = () => {
  console.log(ruleForm.value)
  saverole(ruleForm.value).then(res => {
    console.log(res.data)
    if (res.code == 200) {
      dialogVisible.value = false
      selerolelist()
      ElMessage.success('添加成功')
    }
  })
}
//修改
const ruleForm2 = ref({
  roleId: '',
  roleName: '',
  roleCode: '',
  roleDesc: '',
  dsScope: '',
})
const dialogVisible2 = ref(false)

const updateForm = () => {
  console.log(ruleForm2.value)
  updaterole(ruleForm2.value).then(res => {
    console.log(res.data)
    if (res.code == 200) {
      console.log(res)
      dialogVisible2.value = false
      ElMessage.success('修改成功')
      selerolelist()
    }
  })
}
function updatefilst(row) {
  dialogVisible2.value = true
  ruleForm2.value.roleId = row.roleId
  ruleForm2.value.roleName = row.roleName
  ruleForm2.value.roleCode = row.roleCode
  ruleForm2.value.roleDesc = row.roleDesc
  ruleForm2.value.dsScope = row.dsScope
}
//删除
const delerole = id => {
  console.log(id)
  removerole(id).then(res => {
    console.log(res.data)
    if (res.code == 200) {
      selerolelist()
      ElMessage.success('删除成功')
    }
  })
}
</script>
